<template>
  <div class="character-container">
    <svg 
      viewBox="0 0 100 150" 
      class="animated-character"
      @mouseenter="hovering = true"
      @mouseleave="hovering = false"
    >
      <!-- 背景装饰 -->
      <rect width="100" height="150" fill="#f8f9fa" opacity="0.3" />
      
      <!-- 答题状态指示 -->
      <g v-if="showResult">
        <circle cx="50" cy="15" r="12" :fill="isCorrect ? '#4CAF50' : '#F44336'" opacity="0.8" />
        <text x="50" y="20" font-size="14" font-weight="bold" text-anchor="middle" fill="white">
          {{ isCorrect ? '✓' : '✗' }}
        </text>
      </g>
      
      <!-- 小人物主体 -->
      <g 
        :class="{
          'wave-animation': hovering,
          'celebrate-animation': showResult && isCorrect,
          'sad-animation': showResult && !isCorrect
        }"
      >
        <!-- 头部 -->
        <circle cx="50" cy="30" r="20" fill="#FFD700" />
        <circle cx="43" cy="25" r="3" fill="#333" /> <!-- 左眼 -->
        <circle cx="57" cy="25" r="3" fill="#333" /> <!-- 右眼 -->
        <path 
          :d="showResult && !isCorrect ? 'M45,38 Q50,33 55,38' : 'M45,35 Q50,42 55,35'" 
          fill="none" 
          stroke="#333" 
          stroke-width="2" 
        /> <!-- 表情 -->
        
        <!-- 身体 -->
        <rect x="45" y="50" width="10" height="40" rx="5" fill="#4169E1" />
        
        <!-- 手臂 - 使用动画类 -->
        <g class="arm-animation">
          <line x1="45" y1="55" x2="30" y2="70" stroke="#FFD700" stroke-width="6" stroke-linecap="round" />
          <line x1="55" y1="55" x2="70" y2="70" stroke="#FFD700" stroke-width="6" stroke-linecap="round" />
        </g>
        
        <!-- 腿部 - 使用动画类 -->
        <g class="leg-animation">
          <line x1="45" y1="90" x2="35" y2="120" stroke="#4169E1" stroke-width="6" stroke-linecap="round" />
          <line x1="55" y1="90" x2="65" y2="120" stroke="#4169E1" stroke-width="6" stroke-linecap="round" />
        </g>
      </g>
    </svg>
    
    <!-- 模拟答题按钮 -->
    <div class="btn-group">
      <button @click="answerQuestion(true)" class="answer-btn">正确答案</button>
      <button @click="answerQuestion(false)" class="answer-btn">错误答案</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const hovering = ref(false);
const showResult = ref(false);
const isCorrect = ref(false);

// 模拟答题逻辑
const answerQuestion = (correct) => {
  isCorrect.value = correct;
  showResult.value = true;
  
  // 3秒后重置状态
  setTimeout(() => {
    showResult.value = false;
  }, 3000);
};
</script>

<style scoped>
.character-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.animated-character {
  width: 200px;
  height: 300px;
  margin-bottom: 20px;
}

.btn-group {
  display: flex;
  gap: 10px;
}

.answer-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #4169E1;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

.answer-btn:hover {
  background-color: #2E59A7;
}

/* 手臂动画 */
@keyframes swingArms {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}

.arm-animation {
  transform-origin: 50px 55px;
  animation: swingArms 1s infinite ease-in-out;
}

/* 腿部动画 */
@keyframes walk {
  0% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(5deg);
  }
}

.leg-animation {
  transform-origin: 50px 90px;
  animation: walk 1s infinite ease-in-out;
}

/* 挥手动画 - 鼠标悬停时 */
@keyframes wave {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(15deg);
  }
  75% {
    transform: rotate(-10deg);
  }
}

.wave-animation {
  transform-origin: 50px 90px;
  animation: wave 2s infinite ease-in-out;
}

/* 答对时的庆祝动画 */
@keyframes celebrate {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-10px) rotate(5deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(-10px) rotate(-5deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

.celebrate-animation {
  transform-origin: 50px 90px;
  animation: celebrate 1s ease-in-out;
}

/* 答错时的悲伤动画 */
@keyframes sad {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-10deg);
  }
}

.sad-animation {
  transform-origin: 50px 120px;
  animation: sad 1s ease-in-out;
}
</style>